<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>地址选择器</title>
        <link rel="stylesheet" href="__CDN__/assets/css/bootstrap.min.css" />
        <link rel="stylesheet" href="__CDN__/assets/css/fastadmin.min.css" />
        <link rel="stylesheet" href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css" />
    </head>
    <body>
        <style type="text/css">
            body{
                margin:0;padding:0;
            }
            #container{
                position:absolute;
                left:0;top:0;right:0;bottom:0;
            }
            .confirm{
                position:absolute;
                bottom:30px;right:4%;
                z-index:99;
                height: 50px;
                width: 50px; 
                line-height:50px;
                font-size:15px;
                text-align:center;
                background-color:white;
                background:#1ABC9C;
                color:white;
                border:none;
                cursor:pointer;
                border-radius: 50%;
            }
            .search {position:absolute;width:400px;top:0;left:50%;padding:5px;margin-left:-200px;}
        </style>
        <div class="search">
            <div class="input-group">
                <input type="text" id="place" name="q" class="form-control" placeholder="输入地点" />
                <span class="input-group-btn">
                    <button type="submit" name="search" id="search-btn" class="btn btn-success">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </div>
        <div class="confirm">确定</div>
        <div id="container"></div>
        <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=place"></script>
        <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var map, marker, geocoder, infoWin, searchService, address = null;
                var init = function () {
                    var center = new qq.maps.LatLng({$lat}, {$lng});
                    map = new qq.maps.Map(document.getElementById('container'), {
                        center: center,
                        zoom: parseInt("{$scale}")
                    });
                    //初始化marker
                    initmarker(center);

                    //实例化信息窗口
                    infoWin = new qq.maps.InfoWindow({
                        map: map
                    });
                    geocoder = new qq.maps.Geocoder({
                        complete: function (result) {
                            infoWin.open();
                            address = result.detail.addressComponents.province +
                                    result.detail.addressComponents.city +
                                    result.detail.addressComponents.district;
                            if (result.detail.addressComponents.streetNumber == '') {
                                address += result.detail.addressComponents.street;
                            } else {
                                address += result.detail.addressComponents.streetNumber;
                            }
                            infoWin.setContent(address);
                            infoWin.setPosition(result.detail.location);
                        }
                    });
                    //显示当前marker的位置信息窗口
                    geocoder.getAddress(center);

                    var latlngBounds = new qq.maps.LatLngBounds();
                    //查询poi类信息
                    searchService = new qq.maps.SearchService({
                        complete: function (results) {
                            var pois = results.detail.pois;
                            for (var i = 0, l = pois.length; i < l; i++) {
                                var poi = pois[i];
                                latlngBounds.extend(poi.latLng);
                                initmarker(poi.latLng);
                                //显示当前marker的位置信息窗口
                                geocoder.getAddress(poi.latLng);
                            }
                            map.fitBounds(latlngBounds);
                        }
                    });
                    //实例化自动完成
                    var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
                    //添加监听事件
                    qq.maps.event.addListener(ap, "confirm", function (res) {
                        searchKeyword();
                    });
                };

                //实例化marker和监听拖拽结束事件
                var initmarker = function (latLng) {
                    marker = new qq.maps.Marker({
                        map: map,
                        position: latLng,
                        draggable: true,
                        title: '拖动图标选择位置'
                    });
                    //监听拖拽结束
                    qq.maps.event.addListener(marker, 'dragend', function (event) {
                        var latLng = event.latLng,
                                lat = latLng.getLat().toFixed(5),
                                lng = latLng.getLng().toFixed(5);
                        var latLng = new qq.maps.LatLng(lat, lng);
                        //调用获取位置方法
                        geocoder.getAddress(latLng);
                    });
                };
                var close = function (data) {
                    var index = parent.Layer.getFrameIndex(window.name);
                    var callback = parent.$("#layui-layer" + index).data("callback");
                    //再执行关闭
                    parent.Layer.close(index);
                    //再调用回传函数
                    if (typeof callback === 'function') {
                        callback.call(undefined, data);
                    }
                };

                //执行搜索方法
                var searchKeyword = function () {
                    searchService.clear();//先清除
                    marker.setMap(null);
                    infoWin.close();
                    var keyword = $("#place").val();
                    searchService.setLocation("{$location}");//设置默认检索范围（默认为全国），类型可以是坐标或指定的城市名称。
                    searchService.setPageIndex(0);//设置检索的特定页数。
                    searchService.setPageCapacity(1);//设置每页返回的结果数量。
                    searchService.search(keyword);//开始查询
                };
                
                //点击确定后执行回调赋值
                $(document).on('click', '.confirm', function () {
                    var as = marker.getPosition();
                    var x = as.getLat().toFixed(5);
                    var y = as.getLng().toFixed(5);
                    var zoom = map.getZoom();
                    var data = {lat: x, lng: y, zoom: zoom, address: address};
                    close(data);
                });

                //点击搜索按钮
                $(document).on('click', '#search-btn', function () {
                    if ($("#place").val() == '')
                        return;
                    searchKeyword();
                });

                init();
            });
        </script>
    </body>
</html>